<template>
	<view class="page">
		<view class="content" :style="{
			bottom: `${bottom + 60}px`,
		}">
			<Tab1 v-show="active == 0" v-if="showPage[0]" />
			<Tab2 v-show="active == 1" v-if="showPage[1]" />
			<Tab3 v-show="active == 3" v-if="showPage[3]" />
			<Tab4 v-show="active == 4" v-if="showPage[4]" />
		</view>
		<view class="tabs" :style="{
			paddingBottom: `${bottom}px`
		}">
			<view class="tab" v-for="(tab, index) in tabs" :key="index" @click="changeTab(index)">
				<view class="tab-icon" v-if="index != 4">
					<image class="tab-icon" :src="active == index ? tab.selectIconPath : tab.iconPath" mode="aspectFit"></image>
				</view>
				<view class="tab-avatar" :class="{active: active == index}" v-if="index == 4">
					<image :src="tab.iconPath"></image>
				</view>
			</view>
		</view>

		<view class="mask" @click="show = false" v-if="show" :style="{bottom: `${bottom + 60}px`}"></view>
		<view class="bubble" v-if="show" :style="{bottom: `${bottom + 60}px`}">
			<view class="menus">
				<view class="menu" v-for="(tab, index) in fabTab" :key="index" @click="goItem(index)">
					<text :class="tab.icon"></text>
					<text>{{ tab.label }}</text>
				</view>
			</view>
		</view>

		<c-modal :show="modal" title="系统提示" content="是否退出登陆？" showCancel @confirm="confirm()"
			@cancel="modal = false"></c-modal>
	</view>
</template>

<script>
	import mixins from '@/mixins/index.js'
	import Tab1 from './components/tab1.vue'
	import Tab2 from './components/tab2.vue'
	import Tab3 from './components/tab3.vue'
	import Tab4 from './components/tab4.vue'
	export default {
		mixins: [mixins],
		components: {
			Tab1,
			Tab2,
			Tab3,
			Tab4
		},
		data() {
			return {
				active: 4,
				showPage: [false, false, false, false, true],
				tabs: [{
					iconPath: require('@/static/tabs/icon_home.png'),
					selectIconPath: require('@/static/tabs/icon_home_s.png')
				}, {
					iconPath: require('@/static/tabs/icon_circle.png'),
					selectIconPath: require('@/static/tabs/icon_circle_s.png')
				}, {
					iconPath: require('@/static/tabs/icon_plus.png')
				}, {
					iconPath: require('@/static/tabs/icon_message.png'),
					selectIconPath: require('@/static/tabs/icon_message_s.png')
				}, ],
				show: false,
				fabTab: [{
						icon: 'icon-article',
						label: '发图文',
					},
					{
						icon: 'icon-video',
						label: '发视频'
					},
					{
						icon: 'icon-topic',
						label: '新话题'
					}
				],
				popup: true,
				modal: false
			}
		},
		computed: {
			bottom() {
				return uni.getSystemInfoSync().safeAreaInsets.bottom
			}
		},
		created() {
			this.tabs.push({
				iconPath: require('@/static/1.png')
			})
			uni.$on('showLoginoutModal', () => {
				this.modal = true
			})
		},
		methods: {
			changeTab(index) {
				this.show = index == '2'
				if (index != 2) {
					this.active = index
					if (this.showPage[index] === false) {
						this.showPage[index] = true
					}
				}
			},
			goItem(index) {
				this.show = false
				uni.navigateTo({
					url: `/pages/common/publish?type=${index}`
				})
			},
			confirm() {
				this.modal = false
				// TODO 登陆缓存

				uni.reLaunch({
					url: '/layout/index/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.mask {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .8);
		z-index: 15888;
	}

	.bubble {
		position: absolute;
		background-color: #FFFFFF;
		left: 0;
		bottom: 0;
		width: calc(100% - 40px);
		margin: 0 20px;
		transform: translateY(-10px);
		border-radius: 14px;
		box-shadow: 0 0px 2px rgba(0, 0, 0, .5);
		z-index: 15899;

		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translate(-50%, 100%);
			border: 8px solid #FFFFFF;
			border-left: 8px solid transparent;
			border-bottom: 8px solid transparent;
			border-right: 8px solid transparent;
		}

		.menus {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.menu {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			padding: 10px 0;
			color: #232832;
			font-size: 15px;
		}

		[class*=icon-] {
			font-size: 28px;
		}
	}

	.content {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0;
		box-sizing: border-box;
		z-index: 10012;
	}

	.tabs {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		width: 100%;
		height: 59px;
		background-color: #FFFFFF;
		border-top: 1px solid #DDDDDD;
		z-index: 10011;

		.tab {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
		}

		.tab-icon {
			display: block;
			width: 22px;
			height: 22px;

			image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		.tab-avatar {
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			padding: 2px;

			&.active {
				background: linear-gradient(to bottom, rgb(110, 134, 255), rgb(167, 181, 255));

			}

			image {
				display: block;
				width: 22px;
				height: 22px;
				border-radius: 50%;
			}
		}
	}
</style>